<script lang="ts" setup>
import MainCenter from '@/layout/MainCenter/index.vue'
import ArticleItem from '@/components/ArticleItem/index.vue'
import {getMenuList,getArticleList} from '@/api/cate'
import {decryData,encryData} from '@/utils/utils'
import { ref,onMounted, watch, reactive } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import moment from 'moment'


const route = useRoute()
const router = useRouter()


interface cateItem {
    cateName:string,
    cateId:number,
    cateDesc?:string
    cateAlias?:string
}

let activeKey = ref<null | number>(null); // 当前面板被激活的key
let cates = ref<cateItem[]>([])
let requestCateList = async () => {
    try {
        let data:any = await getMenuList()
        if(data.code == 200) {
            cates.value = data.cates
            if(route.params.cateId) {
                // 判断路由参数中是否有cateId
                activeKey.value = decryData(route.params.cateId)
            }else {
                activeKey.value = cates.value[0].cateId // 默认选中第一个分类
            }
            requestCurrentCateArticle() //获取当前分类下面的文章
        }else {
            message.error(data.message)
            return
        }
    }catch(e:any){
        message.error(e.message)
    }
}

/* 获取当前分类下面文章 */
let requestCateArticleConfig = reactive<{
    page:number,
    pageSize:number,
    cateId?:number,
    count?:number
}>({
    page:1,
    pageSize:12,
    count:0
})

interface articleItem {
    articleId: number;
    articleTitle: string;
    articleDesc: string;
    userName:string,
    publicTime:string,
    tags: string[];
    articleCover:string
}
let isLoading = ref<Boolean>(false)
let cateArticles = ref([])
let requestCurrentCateArticle = async () => {
    try {
        isLoading.value = true
        let data:any = await getArticleList(<number>activeKey.value,requestCateArticleConfig.page,requestCateArticleConfig.pageSize)
        isLoading.value = false
        data.articles.forEach((item:articleItem) => {
            item.articleCover = item.articleCover
            item.publicTime = moment(item.publicTime).format('YYYY-MM-DD HH:mm:ss')
        })
        cateArticles.value = data.articles
      // console.log('当前分类文章数据',data)
        requestCateArticleConfig.count = data.count
    }catch(e:any){
        isLoading.value = false
    }
}

requestCateList()
let changePage = (page:number,pageSize:number) => {
    requestCateArticleConfig.page = page
    requestCurrentCateArticle()
}

// 点击标题跳转
let switchDetail = (article:articleItem) => {
    let articleId = encryData(article.articleId)
    router.push({name:"Detail",params:{articleId}})
}


/* 面板切换的回调 */
let tabChange = (activeKey:number|string) => {
    requestCateArticleConfig.page = 1 // 初始化当前类的页数
    requestCurrentCateArticle()
}


</script>

<template>
    <div class="cate-container">
        <MainCenter>
            <div class="cate-list-box">
                <div class="cate-tab">
                    <a-spin style="text-align: center;" size="large" tip="正在加载中......" v-if="cates.length==0" />
                    <a-tabs v-else v-model:activeKey="activeKey" @change="tabChange">
                        <a-tab-pane :key="cate.cateId" v-for="(cate) in cates"  :tab="cate.cateName"></a-tab-pane>
                    </a-tabs>
                </div>
                <div class="cate-article-list">
                    <a-skeleton :active="true" class="askeleton-custrom" v-if="isLoading" :loading="isLoading" />
                    <div class="list" v-if="!isLoading && cates.length!==0">
                        <ArticleItem @titleClicke="switchDetail(article)" :article="article" v-for="article in cateArticles" :key="article.articleId"></ArticleItem>
                        <a-pagination
                            v-model:current="requestCateArticleConfig.page"
                            v-model:pageSize="requestCateArticleConfig.pageSize"
                            :total="requestCateArticleConfig.count"
                            show-less-items
                            @change="changePage"
                            :showSizeChanger="false"
                        ></a-pagination>
                    </div>
                </div>
            </div>
        </MainCenter>
    </div>
</template>

<style lang="scss" scoped>
.cate-container {
    min-height: calc(100vh - 56px);
    background: #f2f3f5;
}
::v-deep .ant-tabs-nav::before {
    border-bottom: 0px;
}
::v-deep .ant-tabs-nav {
    padding: 0 1.5rem;
}
::v-deep .home-content{
    padding: 1.5rem 0px;
}
.cate-list-box {
    background: #fff;
}
.askeleton-custrom {
    margin: 0px;
}
.cate-tab {
    width: 100vw;
    max-width: 100%;
    text-align: center;
    padding: 1.5rem;
}
.cate-article-list {
    padding: 0px 1.5rem;
}
::v-deep .ant-pagination {
    text-align: right;
    padding: 1.5rem;
}



// xs
@media screen and (max-width: 480px){
    ::v-deep .home-content{
        padding: 0px 0px;
    }
    .cate-tab {
        padding: 0px;
        position: sticky;
        top: 56px;
        left: 0px;
        z-index: 999;
        background: #fff;
    }
    .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap::before {
        position: none;
    }
    .cate-article-list {
        padding: 0px;
    }
}
// sm
@media screen and (max-width: 576px){
    ::v-deep .home-content{
        padding: 0px 0px;
    }
    .cate-tab {
        padding: 0px;
        position: sticky;
        top: 56px;
        left: 0px;
        z-index: 999;
        background: #fff;
    }
    .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap::before {
        position: none;
    }
    .cate-article-list {
        padding: 0px;
    }
}
</style>